<template>
  <div class="myContainer">
    <el-row class="myTitleBorderBottom myMarginBottom_10px">
      <el-col :span="12" class="myLineHeight_40px">设备参数基本信息</el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        设备名称 :
      </el-col>
      <el-col :span="7">
        <el-input placeholder="请输入设备名称" v-model="detail.dev_name" :readonly="is_modifly"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        设备编号 :
      </el-col>
      <el-col :span="7">
        <el-input placeholder="请输入设备编号" v-model="detail.dev_no" :readonly="is_modifly"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        参数名称 :
      </el-col>
      <el-col :span="7">
        <el-input placeholder="请输入参数名称" v-model="detail.dev_para_name" :readonly="is_modifly"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        参数编号 :
      </el-col>
      <el-col :span="7">
        <el-input placeholder="请输入参数编号" v-model="detail.dev_para_no" :readonly="is_modifly"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        参数类型 :
      </el-col>
      <el-col :span="7">
        <el-select 
          :disable="is_modifly"
          v-model="paraTypeSelected"
          clearable
          placeholder="请选择参数类型">
          <el-option
            v-for="item in Object.keys(paraTypeList)"
            :key="paraTypeList[item]"
            :label="paraTypeList[item]"
            :value="item">
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        所属节点 :
      </el-col>
      <el-col :span="7">
        <el-select 
          :disable="is_modifly"
          v-model="collectNodeSelcted"
          clearable
          @visible-change="clickCollectNodeSelect"
          placeholder="请选择采集节点类型">
          <el-option
            v-for="item in collectNodeList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row class="myTitleBorderBottom myMarginBottom_10px">
      <el-col :span="12" class="myLineHeight_40px">设备参数数据指标</el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        起始地址 :
      </el-col>
      <el-col :span="7">
        <el-input placeholder="请输入起始地址" v-model="detail.start_addr" :readonly="is_modifly"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        数据长度 :
      </el-col>
      <el-col :span="7">
        <el-input placeholder="请输入数据长度" v-model="detail.data_len" :readonly="is_modifly"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        传感器编码 :
      </el-col>
      <el-col :span="7">
        <el-input placeholder="请输入传感器编码" v-model="detail.sensor_code" :readonly="is_modifly"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        取值函数 :
      </el-col>
      <el-col :span="7">
        <el-input placeholder="请输入取值函数" v-model="detail.get_fun" :readonly="is_modifly"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        下放函数 :
      </el-col>
      <el-col :span="7">
        <el-input placeholder="请输入下放函数" v-model="detail.display_fun" :readonly="is_modifly"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        是否位运算 :
      </el-col>
      <el-col :span="7" class="myLineHeight_40px">
        <el-radio-group v-model="detail.bit_operation">
          <el-radio :label="true">是</el-radio>
          <el-radio :label="false">否</el-radio>
        </el-radio-group>
      </el-col>
    </el-row>
    <el-row class="myTitleBorderBottom myMarginBottom_10px">
      <el-col :span="12" class="myLineHeight_40px">设备参数告警阀值</el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        参数阀值 :
      </el-col>
      <el-col :span="10">
        <table class="myTable">
          <tr>
            <td colspan="5">
              <span class="myState">状态:</span>
              <el-radio-group 
                v-model="detail.enable_alarm">
                <el-radio :label="1">启用</el-radio>
                <el-radio :label="0">禁用</el-radio>
              </el-radio-group>
            </td>
          </tr>
          <tr>
            <td>LLow</td>
            <td>超低</td>
            <td>
              <el-select 
                v-model="llowLevelSelected"
                placeholder="请输入警戒值">
                <el-option
                  v-for="item in Object.keys(alarmLevelList)"
                  :key="alarmLevelList[item]"
                  :label="alarmLevelList[item]"
                  :value="item">
                </el-option>
              </el-select>
            </td>
            <td>
              <el-input placeholder="请输入警戒值" v-model="detail.llow_val" :readonly="is_modifly"></el-input>
            </td>
            <td>
              <el-input placeholder="请输入报警文本信息" v-model="detail.llow_msg" :readonly="is_modifly"></el-input>
            </td>
          </tr>
          <tr class="odd gradeX">
            <td>Low</td>
            <td>低</td>
            <td>
              <el-select 
                v-model="lowLevelSelected"
                placeholder="请输入警戒值">
                <el-option
                  v-for="item in Object.keys(alarmLevelList)"
                  :key="alarmLevelList[item]"
                  :label="alarmLevelList[item]"
                  :value="item">
                </el-option>
              </el-select>
            </td>
            <td>
              <el-input placeholder="请输入警戒值" v-model="detail.low_val" :readonly="is_modifly"></el-input>
            </td>
            <td>
              <el-input placeholder="请输入报警文本信息" v-model="detail.low_msg" :readonly="is_modifly"></el-input>
            </td>
          </tr>
          <tr class="odd gradeX">
            <td>High</td>
            <td>高</td>
            <td>
              <el-select 
                v-model="highLevelSelected"
                placeholder="请输入警戒值">
                <el-option
                  v-for="item in Object.keys(alarmLevelList)"
                  :key="alarmLevelList[item]"
                  :label="alarmLevelList[item]"
                  :value="item">
                </el-option>
              </el-select>
            </td>
            <td>
              <el-input placeholder="请输入警戒值" v-model="detail.high_val" :readonly="is_modifly"></el-input>
            </td>
            <td>
              <el-input placeholder="请输入报警文本信息" v-model="detail.high_msg" :readonly="is_modifly"></el-input>
            </td>
          </tr>
          <tr class="odd gradeX">
            <td>HHigh</td>
            <td>超高</td>
            <td>
              <el-select 
                v-model="hhighLevelSelected"
                placeholder="请输入警戒值">
                <el-option
                  v-for="item in Object.keys(alarmLevelList)"
                  :key="alarmLevelList[item]"
                  :label="alarmLevelList[item]"
                  :value="item">
                </el-option>
              </el-select>
            </td>
            <td>
              <el-input placeholder="请输入警戒值" v-model="detail.hhigh_val" :readonly="is_modifly"></el-input>
            </td>
            <td>
              <el-input placeholder="请输入报警文本信息" v-model="detail.hhigh_msg" :readonly="is_modifly"></el-input>
            </td>
          </tr>
          <tr class="odd gradeX">
            <td>Bool</td>
            <td>开关</td>
            <td>
              <el-select 
                v-model="detail.bool_level"
                placeholder="请输入警戒值">
                <el-option
                  v-for="item in Object.keys(alarmLevelList)"
                  :key="alarmLevelList[item]"
                  :label="alarmLevelList[item]"
                  :value="item">
                </el-option>
              </el-select>
            </td>
            <td>
              <el-input placeholder="请输入警戒值" v-model="detail.bool_val" :readonly="is_modifly"></el-input>
            </td>
            <td>
              <el-input placeholder="请输入报警文本信息" v-model="detail.bool_msg" :readonly="is_modifly"></el-input>
            </td>
          </tr>
        </table>
      </el-col>
    </el-row>
    <el-row class="myTitleBorderBottom myMarginBottom_10px">
      <el-col :span="12" class="myLineHeight_40px">设备参数告警阀值</el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        参数状态 :
      </el-col>
      <el-col :span="7" class="myLineHeight_40px">
        <el-radio-group v-model="detail.status">
          <el-radio :label="1">启用</el-radio>
          <el-radio :label="0">禁用</el-radio>
        </el-radio-group>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        备注 :
      </el-col>
      <el-col :span="10">
        <el-input placeholder="备注" type="textarea" v-model="detail.extra_desc" :readonly="is_modifly"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="7" :offset="3">
        <el-button type="primary" class="myBgGreen" v-if="type=='update'" @click="saveData($event)">保 存</el-button>
        <el-button type="primary" class="myBgGreen" v-if="type=='add'" @click="saveAddData($event)">新 增</el-button>
        <el-button type="primary" class="myBgGreen" v-if="type=='infor'" @click="goModifly($event)">编 辑</el-button>
        <el-button type="primary" class="myBgGreen" @click="close">返 回</el-button>
      </el-col>
    </el-row>
  </div>
</template>
<style scoped>
  .myContainer{
    background: #fff;
    padding: 10px;
  }
  .myTitleBorderBottom{
    color: #000;
    font-weight: 500;
    font-size: 16px;
    border-bottom: 1px solid #dbdbdb;
  }
  .myBgGreen{
    background: #00c2a9;
    border-color: #00c2a9;
    color: #fff;
    margin-top:2px;
  }
  .myBgGreen:hover{
    background: #33ceba;
  }
  .myTextAlignRight{
    text-align: right;
  }
  .myLineHeight_40px{
    line-height: 40px;
  }
  .myMarginTop_10px{
    margin-top: 10px;
  }
  .myLeftMsg{
    line-height: 40px;
    text-align: right;
    padding-right: 10px;
  }
  .myPaddingBottom_10px{
    padding-bottom: 10px;
  }
  .myVA_M{
    vertical-align: middle;
  }
  .myMarginBottom_10px{
    margin-bottom: 20px;
  }
  .myTable{
    width: 100%;
    height: auto;
  }
  .myTable,.myTable tr,.myTable td{
    border:1px solid #dbdbdb;
  }
  .myTable td:nth-child(1){
    text-align: left;
  }
  .myTable td{
    padding: 10px;
  }
  .myTable tr:nth-child(even){
    background: #fafafa;
  }
  .myState{
    display: inline-block;
    vertical-align: top;
  }
</style>
<script>
  import {sbcslx} from '@/config/sjlx';
  import { getCollectParaDetail, modifyCollectPara, createCollectPara, paraTypeList, alarmLevelList } from '@/api/collect_para'
  import { getCollectNodeList } from '@/api/collect_node'
  export default {
    data(){
      return{
        title: '设备参数管理',
        devId: null,
        paraId: null,
        detail: {},

        paraTypeSelected: null,
        paraTypeList: paraTypeList,

        collectNodeSelcted: null,
        collectNodeList: [],
        collectNodeLoaded: false,

        alarmLevelList: alarmLevelList,
        llowLevelSelected: null,
        lowLevelSelected: null,
        highLevelSelected: null,
        hhighLevelSelected: null,

        type:'',
        is_modifly:true,
        roleList:[],
        listObj:{},
        number:0,
        title:"",
     
        dev_id:-1,
        selected:-1,
        sblist:[],

        collect_node_id:-1,
        selectedcjjd:-1,
        xqdlistcjjd:[],

        
        para_type:-1,
        selectedjdlx:-1,
        cslxdlist:sbcslx,

        glNum:2,
        glNumChild:1,
        dev_para_id:"",
        dev_para_name:"",
        dev_para_no:"",
       
        para_type:-1,
        dev_para_name:"",
        start_addr:"",
        data_len:"",
        get_fun:"",
        sensor_code:"",
        display_fun:"",
        bit_operation:true,
        status:1,
        extra_desc:"",
        llow_val:"",
        low_val:"",
        high_val:"",
        hhigh_val:"",
        bool_val:"",
        llow_level:"",
        low_level:"",
        high_level:"",
        hhigh_level:"",
        bool_level:"",
        llow_msg:"",
        low_msg:"",
        high_msg:"",
        hhigh_msg:"",
        bool_msg:"",
        enable_alarm:true,
        collect_node_name:"",
        dev_name:"",
        llow_level:-1,
        is_disabled:false,
        llow_list:[
          {"id":1,name:"告警"},
          {"id":2,name:"严重告警"},
        ],

        low_level:-1,
        low_list:[
          {"id":1,name:"告警"},
          {"id":2,name:"严重告警"},
        ],

        high_level:-1,
        high_list:[
          {"id":1,name:"告警"},
          {"id":2,name:"严重告警"},
        ],

        hhigh_level:-1,
        hhigh_list:[
          {"id":1,name:"告警"},
          {"id":2,name:"严重告警"},
        ],

        bool_level:-1,
        bool_list:[
          {"id":1,name:"告警"},
          {"id":2,name:"严重告警"},
        ],

      }
    },
    components: {
        //NotConTip
    },
    created(){
      this.type = this.$route.query.type;
      this.devId = this.$route.query.devId;
      this.paraId = this.$route.query.paraId;

      if(this.type=='update'){ //修改
        this.fetchDetail();
        this.is_modifly = false;
        this.is_disabled = false;
      }

      if(this.type=='add'){
        this.is_modifly = false;
      }

      if(this.type=='info'){ //修改
        this.fetchDetail();
        this.is_modifly = true;
        this.is_disabled = true;
      }
    },
    methods:{     
     fetchDetail() {
        let vm = this;
        this.loading = true;

        getCollectParaDetail(this.paraId)
        .then(response => {
          vm.detail = response.data;

          vm.collectNodeSelcted = vm.detail.collect_node_info.value;
          vm.$set(vm.collectNodeList, 0, vm.detail.collect_node_info);

          vm.paraTypeSelected = vm.detail.para_type + '';

          vm.llowLevelSelected = vm.detail.llow_level + '';
          vm.lowLevelSelected = vm.detail.low_level + '';
          vm.highLevelSelected = vm.detail.high_level + '';
          vm.hhighLevelSelected = vm.detail.hhigh_level + '';

          vm.loading = false;
        })
        .catch(error => {
          vm.loading = false;
        })
      },
      clickCollectNodeSelect(val) {
        if (!val) {
          return;
        }
        let vm = this;
        const params = {
          ril: 'S',
          page_num: 1,
          page_size: 999
        };
        if (!this.collectNodeLoaded) {
          getCollectNodeList(null, params)
          .then(response => {
            vm.collectNodeList = response.data.rows;
            vm.collectNodeLoaded = true;
          })
          .catch(error => {

          })
        }
      },
      close() {
        this.$router.push({
          path:'/sbcsjt',
          query: {type: 'info', id: this.devId}
        })
      },
      changeSelect:function(select){
        this.dev_id = select;
        console.log(this.dev_id)
        if(this.dev_id != -1){
          $(".errorSssb").addClass("hide");
          $(".errorSssb").closest(".col-md-6").find("select").removeClass("errorInput");
        }
      },

      changeSelectjdlx:function(select){
        this.para_type = select;
        console.log(this.para_type)
        if(this.para_type != -1){
          $(".errorIp").addClass("hide");
          $(".errorIp").closest(".col-md-6").find("select").removeClass("errorInput");
        }
      },

      changeSelectsjlx:function(select){
        this.collect_node_id = select;
        console.log(this.collect_node_id)
        if(this.collect_node_id != -1){
          $(".errorZt").addClass("hide");
          $(".errorZt").closest(".col-md-6").find("select").removeClass("errorInput");
        }
      },
      goModifly:function(){
        this.is_modifly = true;
        this.id_disabled = true;
      },
      qybj:function(){
        this.enable_alarm = true;
      },
      qybj1:function(){
        this.enable_alarm = false;
      },
      changellow:function(select){
        this.llow_level = select;

      },
      changelow:function(select){
        this.low_level = select;
      },
      changehigh:function(select){
        this.high_level = select;
      },
      changehhigh:function(select){
        this.hhigh_level = select;
      },
      changebool:function(select){
        this.bool_level = select;
      },

        
      leaderPe:function(e){
        this.status = $(e.currentTarget).find("input").val();
      },

      leaderPeBit:function(e){
        this.bit_operation = $(e.currentTarget).find("input").val();
      },
     
      inputFunc:function(e){
        if($.trim($(e.target).val())!=""){
          $(e.target).closest(".col-md-6").find(".errorInfor").addClass("hide");
          $(e.target).closest(".col-md-6").find("input").removeClass("errorInput")          
        }
      },
      isValidate:function(e){
        var res = true;
        if(this.dev_para_name==""){
          $(".errorName").removeClass("hide");
          $(".errorName").closest(".col-md-6").find("input").addClass("errorInput");
          res = false;
        }

        
        
        if(this.dev_id==-1){
          $(".errorSssb").removeClass("hide");
          $(".errorSssb").closest(".col-md-6").find("select").addClass("errorInput");         
          res = false;
        }

        if(this.para_type==-1){
          $(".errorIp").removeClass("hide");
          $(".errorIp").closest(".col-md-6").find("select").addClass("errorInput");         
          res = false;
        }

        if(this.collect_node_id==-1){
          $(".errorZt").removeClass("hide");
          $(".errorZt").closest(".col-md-6").find("select").addClass("errorInput");         
          res = false;
        }

        if(this.start_addr==""){
          $(".errorPort").removeClass("hide");
          $(".errorPort").closest(".col-md-6").find("input").addClass("errorInput");         
          res = false;
        }

        return res;
      },
      saveData:function(e){
        if(this.isValidate(e)){

          var dataArr = {
            dev_para_name:this.dev_para_name,
            collect_node_id:this.collect_node_id,
            dev_id:this.dev_id,
            para_type:this.para_type,
            start_addr:this.start_addr,
            data_len:this.data_len,
            get_fun:this.get_fun,
            sensor_code:this.sensor_code,
            display_fun:this.display_fun,
            bit_operation:this.bit_operation,
            status:this.status,
            extra_desc:this.extra_desc,
            llow_val:this.llow_val,
            low_val:this.low_val,
            high_val:this.high_val,
            hhigh_val:this.hhigh_val,
            bool_val:this.bool_val,
            llow_level:this.llow_level,
            low_level:this.low_level,
            high_level:this.high_level,
            hhigh_level:this.hhigh_level,
            bool_level:this.bool_level,
            llow_msg:this.llow_msg,
            low_msg:this.low_msg,
            high_msg:this.high_msg,
            hhigh_msg:this.hhigh_msg,
            bool_msg:this.bool_msg,
            enable_alarm:this.enable_alarm
          }

          console.log(JSON.stringify(dataArr))
          optVue.addModifySbcs(this,dataArr,Tips,this.dev_para_id);
        } 
      },
      saveAddData:function(e){
        if(this.isValidate(e)){
          var dataArr = {
            dev_para_name:this.dev_para_name,
            collect_node_id:this.collect_node_id,
            dev_id:this.dev_id,
           
            para_type:this.para_type,
            start_addr:this.start_addr,
            data_len:this.data_len,
            get_fun:this.get_fun,
            sensor_code:this.sensor_code,
            display_fun:this.display_fun,
            bit_operation:this.bit_operation,
            status:this.status,
            extra_desc:this.extra_desc,
            llow_val:this.llow_val,
            low_val:this.low_val,
            high_val:this.high_val,
            hhigh_val:this.hhigh_val,
            bool_val:this.bool_val,
            llow_level:this.llow_level,
            low_level:this.low_level,
            high_level:this.high_level,
            hhigh_level:this.hhigh_level,
            bool_level:this.bool_level,
            llow_msg:this.llow_msg,
            low_msg:this.low_msg,
            high_msg:this.high_msg,
            hhigh_msg:this.hhigh_msg,
            bool_msg:this.bool_msg,
            enable_alarm:this.enable_alarm


          }

          //console.log(JSON.stringify(dataArr))
          optVue.addSbcs(this,dataArr,Tips);
        } 
      }

    }
  
  }


</script>



